<template>
    <div class="el-textRow-carousel-wrap" :style="{'height': rowHeight + 'px'}" ref="outBox">
        <div ref="innerBox" class="innerBox" :class="{'closeAnimation': closeAnimation}" :style="{'top': positionTop}">
            <div v-for="(item, i) in rowList" :key="i">
                <slot :row="item">
                    <div :style="rowStyle">{{ item }}</div>
                </slot>
            </div>
        </div>
    </div>
</template>


<script>
//1.支持行自定义样式，自适应高度
//2.只渲染2条数据，当前数据和下一条数据
//3.每次滚动完成后，重置滚动位置
export default{
    props: {
        //数据
        data: {
            type: Array,
            default: function(){
                return []
            }
        },
        //行数据为空时的替换文字
        emptyText: {
            type: String,
            default: "暂无数据"
        },
        //轮播间隔（毫秒）
        interval: {
            type: Number,
            default: 3000
        },
        //行自定义样式
        rowStyle: {
            type: Object,
            default: function(){
                return {}
            }
        }
    },
    data(){
        return {
            index: 0,//当前行下标
            timer:  null,//定时器
            rowHeight: "",//行高
            positionTop: 0,//滚动位置
            closeAnimation: false,//动画效果状态
        }
    },
    mounted(){
        //初始化轮播
        this.initCarousel()
    },
    methods: {
        //初始化轮播
        initCarousel(){
            //重置下标
            this.index = 0
            //获取行高(第一个子元素的高度)
            this.rowHeight = this.$refs.innerBox.children[0].clientHeight
            //清除原定时器
            clearInterval(this.timer)
            //开启定时器轮播
            this.timer = setInterval(()=>{
                //更新滚动位置
                this.positionTop = -this.rowHeight + 'px'
            },this.interval)

            //监听过渡结束
            this.$refs.innerBox.addEventListener("transitionend",()=>{
                //关闭过渡效果
                //关闭动画
                this.closeAnimation = true
                //等待关闭动画的渲染
                this.$nextTick(function () {
                   //重置滚动位置
                    this.positionTop = 0
                    setTimeout(()=>{
                        //重新开启动画
                        this.closeAnimation = false
                    },10)
                })
                //下次下标位置
                var nextIndex = this.index + 1
                if(nextIndex >= this.data.length){
                    var nextIndex = 0
                }
                //更新行下标
                this.index = nextIndex
            })
        }
    },
    computed: {
        //当前行数据
        activeRow(){
            return this.data[this.index] || this.emptyText
        },
        //下一条数据
        nextRow(){
            var nextIndex = this.index + 1
            //如果到了尽头，则取第一条
            if(nextIndex >= this.data.length){
                var nextIndex = 0
            }
            return this.data[nextIndex] || this.emptyText
        },
        //要渲染的列表（发生滚动时，只需要渲染2条数据即可）
        rowList(){
            return [this.activeRow, this.nextRow]
        },
    }
}
</script>

<style scoped>
.el-textRow-carousel-wrap{
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.el-textRow-carousel-wrap .innerBox{
    position: absolute;
    z-index: 99;
    left: 0;
    width: 100%;
    transition: all 0.5s;
}
.el-textRow-carousel-wrap .innerBox.closeAnimation{
    transition: none;
}
</style>